<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>交通事故</title>
    <style>
    	.car{
  
  position:relative;
  animation:car 4s infinite ;
  animation-timing-function:ease-out;
  transform-style: preserve-3d;
  current-color: hsla(320 50% 75% 0.5);
  stroke:solid deepskyblue;
  
}
@keyframes car{
  
  
  
  

0% {transform:translate(0px,100px); }
80% { transform:translate(100px,100px);fill="green";}

100% {
transform:translate(100px,200px); 
text-fill-color：yellow;
transform-origin: 45% 45%;
transform:rotate(180deg)}

}
 
    </style>
    
    	
   		
   		
    
</head>
<body>
    <h1>模拟交通事故</h1>

	<svg wigth="380" height="220" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="shuttle-van" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1640 1512" class="car">
		<path   d="M628.88 210.65L494.39 49.27A48.01 48.01 0 0 0 457.52 32H32C14.33 32 0 46.33 0 64v288c0 17.67 14.33 32 32 32h32c0 53.02 42.98 96 96 96s96-42.98 96-96h128c0 53.02 42.98 96 96 96s96-42.98 96-96h32c17.67 0 32-14.33 32-32V241.38c0-11.23-3.94-22.1-11.12-30.73zM64 192V96h96v96H64zm96 240c-26.51 0-48-21.49-48-48s21.49-48 48-48 48 21.49 48 48-21.49 48-48 48zm160-240h-96V96h96v96zm160 240c-26.51 0-48-21.49-48-48s21.49-48 48-48 48 21.49 48 48-21.49 48-48 48zm-96-240V96h66.02l80 96H384z" >
		
	</path>
	</svg>
    <p>使用css的位移、旋转、动画及关键帧。
	<hr/>
	<p>图案来源：<a href="https://fontawesome.com/">Font Awesome</a></p>
    

</body>
</html>